<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>
<style>
  .userImageBtn {
    position: relative;
    bottom: 20px;
  }

  .set_up_body {
    width: 100%;
    height: 100%;
    min-height: 300px;
  }
</style>
<template>
  <div>
    <Card>
      <p slot="title">
        <Icon type="person"></Icon>
        平台设置
      </p>
      <div class="set_up_body">
        <Form :label-width="100"
              label-position="right">
          <FormItem label="平台标题：">
            <img :src="theme_img" alt="平台标题" style="width: auto; height: 44px;" v-if="theme_img">
            <Button type="default" size="small" class="userImageBtn margin-left-10" @click="updateImage">上传标题</Button>
            <span class="userImageBtn margin-left-10 color-c1">(图片尺寸：360 x 88 ）</span>
            <input type="file" id="avatar_file" style="display: none;"
                   accept="image/*"
                   @change="sendFileClick()"/>
          </FormItem>
          <div>
            <!--<Button type="primary" style="width: 100px;" :loading="save_loading" @click="saveInfoAjax">保存</Button>-->
          </div>
        </Form>
      </div>
    </Card>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import Nim from '../../libs/mod.nim';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  export default {
    name: 'test',
    data () {
      return {
        uid: '', // 登录用户的userId
        format: Util.constant.format,
        id: '',
        save_loading: false,
        theme_img: '',
        main_title_img: '/vendors/images/' + Util.main_title_img,
      };
    },
    created: function () {
      var _this = this;
      _this.get_theme_img();
    },
    mounted () {
      var _this = this;
    },
    methods: {
      // 查询已有标题
      get_theme_img: function () {
        var _this = this;
        var data = {
          type: 'theme',
        };
        var params = {
          url: '/file/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data || {};
            var theme_img = data.url || _this.main_title_img;
            _this.theme_img = theme_img;
          } else {
            _this.theme_img = _this.main_title_img;
            _this.$Message.destroy();
            _this.$Message.error('查询标题失败!');
          }
        }
      },
      // 上传标题
      updateImage: function () {
        var _this = this;
        document.getElementById('avatar_file').click();
      },
      sendFileClick: function () {
        var _this = this;
        var __this = document.getElementById("avatar_file");
        var fileObj = __this.files[0];

        var formData = new FormData();
        formData.append("file", fileObj);
        var params = {
          url: '/file/addTheme',
          type: Util.method.post,
          data: formData,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data || {};
            var theme_img = data.url || _this.theme_img;
            _this.theme_img = theme_img;
            _this.$Message.success('上传成功，重新登录后生效!');
          } else {
            _this.$Message.destroy();
            _this.$Message.error('上传失败!');
          }
        }
      },
      saveInfoAjax: function () {

      },

    }
  };
</script>

